<template>
    <div>
        <index-nav></index-nav>
        <a-row>
            <a-col :xs="{span: 24}" :md="{span:22, offset: 1}" :lg="{span:20, offset: 2}" class="contain">
                <a-row  :gutter="16">
                    <a-col :md="8">
                        <a-card title="个人信息" style="">
                            <div style="text-align: center">
<!--                                <a-avatar :size="80" icon="user" :src="$store.getters.avatar"/>-->
                                <user-avatar :user="{'avatar': 'http://101.200.169.229:9300/statics/2022/04/19/03459c3a-fe38-46ce-8ee8-7d540a2bd643.jpeg'}"/>
                            </div>
                            <p>姓名：苏明月</p>
                            <a-divider />
                            <p>账号：1805010219</p>
                            <a-divider />
                            <p>学院：计算机</p>
                            <a-divider />
                            <p>邮箱：284908631@qq.com</p>
                        </a-card>
                    </a-col>
                    <a-col :md="16">
                        <a-card title="基本资料" style="">
                            <a-tabs default-active-key="1">
                                <a-tab-pane key="1" tab="基本资料">
                                    <a-form-model :model="baseForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                                        <a-form-model-item label="电话号码">
                                            <a-input v-model="baseForm.phone" />
                                        </a-form-model-item>
                                        <a-form-model-item label="邮箱">
                                            <a-input v-model="baseForm.email" />
                                        </a-form-model-item>
                                    </a-form-model>
                                    <div style="">
                                        <a-button style="margin-left: 100px">
                                            提交
                                        </a-button>
                                    </div>
                                </a-tab-pane>
                                <a-tab-pane key="2" tab="修改密码">
                                    <a-form-model :model="passwordForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                                        <a-form-model-item label="原始密码">
                                            <a-input v-model="passwordForm.oldPassword" />
                                        </a-form-model-item>
                                        <a-form-model-item label="新密码">
                                            <a-input v-model="passwordForm.password" />
                                        </a-form-model-item>
                                        <a-form-model-item label="确认密码">
                                            <a-input v-model="passwordForm.checkedPassword" />
                                        </a-form-model-item>
                                    </a-form-model>
                                    <div style="">
                                        <a-button style="margin-left: 100px">
                                            提交
                                        </a-button>
                                    </div>
                                </a-tab-pane>
                            </a-tabs>

                        </a-card>
                    </a-col>
                </a-row>

            </a-col>
        </a-row>
    </div>
</template>

<script>
  import IndexNav from '@/views/components/IndexNav'
  import UserAvatar from "./userAvatar"
  export default {
    name: "userInfoIndex",
    components: {IndexNav, UserAvatar},
    data() {
      return {
        baseForm: {},
        passwordForm: {},
      }
    },
    methods: {
    }
  }
</script>

<style scoped>
/deep/ .ant-divider-horizontal {
    margin: 8px 0;
}
p {
    margin-bottom: 5px;
}
/deep/ .ant-card-body {
    padding: 5px 24px 24px 24px;
}
</style>